<template>
  <div class="order-list-container">
    <el-breadcrumb >
      <el-breadcrumb-item >会员管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/member' }">会员列表</el-breadcrumb-item>
      <el-breadcrumb-item >订单列表</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="home-page"
      ref="wrap">
      <section>
        <h1>订单信息</h1>
        <div class="content">
          <el-row class="box">
            <el-col :span="12">
              <label>订单来源</label>{{orderParticulars.source}}
            </el-col>
            <el-col :span="12">
              <label>付款方式</label>{{orderParticulars.paymentMode}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>订单号</label>{{orderParticulars.orderNum}}
            </el-col>
            <el-col :span="12">
              <label>付款金额</label>{{orderParticulars.orderMoney}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>订单状态</label>{{orderParticulars.stateCN}}
            </el-col>
            <el-col :span="12">
              <label>酒店预定号</label>{{orderParticulars.bookingHotelNum}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>预订人</label>{{orderParticulars.reserve}}
            </el-col>
            <el-col :span="12">
              <label>预定人电话</label>{{orderParticulars.reservePhone}}
            </el-col>
          </el-row>
        </div>
      </section>
      <section>
        <h1>酒店信息</h1>
        <div class="content">
          <el-row class="box">
            <el-col :span="12">
              <label>酒店名称</label>{{orderHotelInfo.name}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>酒店电话</label>{{orderHotelInfo.mobile}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>酒店地址</label>{{orderHotelInfo.address}}
            </el-col>
          </el-row>
        </div>
      </section>
      <section>
        <h1>入住信息</h1>
        <div class="content"
          v-for="(item,index) in orderLiveInfoList"
          :key="index">
          <el-row class="box">
            <el-col :span="12">
              <label>房型</label>{{item.room}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>床型</label>{{item.bedType}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>入住状态</label>{{item.stateCN}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>入住房号</label>{{item.checkInRoomNum}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>入住人</label>{{item.liveName}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>联系电话</label>{{item.stayMobile}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="24">
              <label>入离时间</label>
              <span>{{item.inFromTime}}</span>
              <span v-for="i in item.checkRenewList"
                :key="i.id"
                class="renewTime">
                {{i.renewTime}}续房{{i.dayNum}}天
              </span>
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="24">
              <label class="fl">每日房价</label>
              <div class="fl"
                style="width:85%;font-size:12px">
                <p v-for="(subItem,i) in item.prices"
                  :key="i"
                  class="dayPrice fl"
                  style="margin-bottom:15px;">
                  {{subItem.date}}&nbsp;&nbsp;({{subItem.weekOfDate}})&nbsp;&nbsp;￥{{subItem.salePrice}}&nbsp;&nbsp;{{subItem.breakfast}}
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="account-info">
        <h1>账单信息</h1>
        <el-table style="width: 70%"
          :data="checkInList">
          <el-table-column prop="num"
            label="账单号"
           >
          </el-table-column>
          <el-table-column label="房号"
            width="125"
           
            prop="roomNum">
          </el-table-column>
          <el-table-column label="押金"
            width="125"
           
            prop="deposit">
          </el-table-column>

          <el-table-column label="总消费"
           
            prop="moneySum">
          </el-table-column>
          <el-table-column label="商品详情"
            >
            <template slot-scope="scope">
              <el-button @click.native.prevent="goodsDetail(scope.row.checkOrderList)"
                type="text"
                size="small">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <p class="totlePrice">合计：
          <span style="font-size:12px">{{checkOrderMoneySum}}元</span>
        </p>
      </section>
      <section>
        <h1>入住日志</h1>
        <el-row class="box">
          <el-col :span="17">
            <el-table :data="orderLogbookS"
              style="width: 100%"
              min-height="150">
              <el-table-column prop="numbering"
                label="编号"
                min-width="150">
              </el-table-column>
              <el-table-column prop="operationTime"
                label="操作时间"
                min-width="150">
              </el-table-column>
              <el-table-column prop="operationPerson"
                label="操作人"
                min-width="150">
              </el-table-column>
              <el-table-column prop="operationDescribe"
                label="操作描述"
                min-width="150">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </section>
    </div>
    <!-- 商品详情弹窗 -->
    <el-dialog title="商品详情"
      :visible.sync="dialog_goodList"
      width="50%"
      center>
      <div class="goodsList-content">
        <el-table :data="checkOrderList"
          style="width: 95%"
          min-height="150">
          <el-table-column prop="name"
            label="商品名称"
            min-width="150">
          </el-table-column>
          <el-table-column prop="num"
            label="商品数量"
            min-width="150">
          </el-table-column>
          <el-table-column prop="money"
            label="价格"
            min-width="80">
          </el-table-column>
          <el-table-column prop="payType"
            label="收款方式"
            min-width="80">
          </el-table-column>
          <el-table-column prop="getMoney"
            label="收款金额"
            min-width="150">
          </el-table-column>
          <el-table-column prop="accoutTime"
            label="入账时间"
            min-width="150">
          </el-table-column>
          <el-table-column prop="operator"
            label="操作员"
            min-width="100">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click.stop="dialog_goodList = false">关闭</el-button>
      </span>
    </el-dialog>
    <div class="information-btns"
      :style="{width:width}">
      <el-button @click="back"
        size="small">返回</el-button>
    </div>
  </div>
</template>
<script>
import { getOrderDetail} from "@/public/js/order.js";
import { format } from "@/public/js/util.js";

const Breadcrumb = () => import("@/components/common/Breadcrumb");

export default {
  components: {
    Breadcrumb
  },
  data() {
    var validateEveryPrice = (rule, value, callback) => {
      console.log(1111);
      let re = /^[0,9]+.?[0-9]*]*$/;
      if (value == "" || value == null) {
        callback(new Error("请输入退款金额"));
      } else if (!re.test(value)) {
        callback(new Error("请您输入正确的格式"));
      } else {
        callback();
      }
    };
    return {
      source: "全部来源",
      date: "全部日期",
      state: "",
      content: {
        firstTitle: "订单",
        secondTitle: "订单详情",
        type: "close"
      },
      orderParticulars: {},
      orderHotelInfo: {},
      orderLiveInfoList: {},
      orderLogbookS: [],
      dialog_account_print: false,
      dialog_goodList: false,
      dialog_cancleOrder: false,
      checkInList: [],
      checkOrderMoneySum: "",
      checkOrderList: [],
      voucher: "",
      buildingRoomId: "",
      nowTime: format(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"),
      cancel: false,
      reason: "",
      width: "",
      updateData: {
        backMoney: ""
      },
      rules: {
        backMoney: [{ validator: validateEveryPrice, trigger: "blur" }]
      }
    };
  },
  created() {
    this.getOrderInfo();
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + "px";
  },
  methods: {
    // 获取入住详情数据
    getOrderInfo() {
      getOrderDetail({
        orderId: this.$route.query.id
      }).then(res => {
        if (!res.data.errCode) {
          console.log(res.data);
          this.orderParticulars = res.data.orderParticulars;
          this.buildingRoomId;
          this.orderHotelInfo = res.data.orderHotelInfo;
          this.orderLiveInfoList = res.data.orderLiveInfoList;
          this.orderLogbookS = res.data.orderLogbookS;
          this.checkInList = res.data.checkInList;
          this.checkOrderMoneySum = res.data.checkOrderMoneySum;
          this.cancel = res.data.cancel;
        }
      });
    },
    back() {
      this.$router.back();
    },
    //查看商品详情
    goodsDetail(val) {
      console.log(val);
      this.dialog_goodList = true;
      this.checkOrderList = val;
    },
    _rest(formName) {
      this.updateData = {
        backMoney:""
      };
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
#home-page {
  font-size: 14px;
  padding: 0 30px;
  h1 {
    font-size: 16px;
    text-align: left;
    color: #6d2377;
    padding: 15px 0;
  }
  section {
    padding-bottom: 80px;
    border-bottom: 1px solid #f6f6f6;
    .content {
      padding: 20px 0 10px 20px;
      .box {
        padding-bottom: 15px;
        label {
          margin-right: 25px;
          width: 80px;
          text-align: right;
          display: inline-block;
          font-weight: bold;
        }
        .renewTime {
          border: 1px solid #6d2377;
          padding: 8px;
          border-radius: 3px;
          margin-left: 10px;
        }
        .dayPrice {
          margin-right: 15px;
          border: 1px solid #6d2377;
          padding: 8px;
          border-radius: 3px;
        }
      }
    }
    &.account-info {
      .totlePrice {
        padding-top: 15px;
      }
    }
  }
}
.account-content {
  color: #000;
  width: 1000px;
  margin: 0 auto;
  .account-title {
    font-family: "MicrosoftJhengHei";
    font-size: 18px;
    text-align: center;
    padding-bottom: 12px;
  }
  .top-1 {
    line-height: 28px;
    border-bottom: 2px solid #000;
    padding-left: 10px;
    & > div {
      display: flex;
      & > span {
        flex: 1;
      }
    }
  }
  .list {
    text-indent: 30px;
    li {
      display: flex;
      & > span {
        flex: 1;
      }
      &.header {
        border-bottom: 2px solid #000;
      }
    }
  }
}
.goodsList-content {
  .el-table th {
    background: #fff !important;
  }
}
.information-btns {
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
}
</style>
